<template>
    <div>
        <NavTop />
        <div style="width: 1400px;margin: auto;">
            <el-table :data="tableData" :border="parentBorder" style="width: 100%">
                <el-table-column type="expand">
                <template #default="props">
                    <el-table :data="props.row.child" :border="childBorder">
                        <el-table-column label="商品编号" prop="id" />
                        <el-table-column label="商品名称" prop="name" />
                        <el-table-column label="商品数量" prop="num" />
                        <el-table-column label="商品单价" prop="onlineprice" />
                        <el-table-column label="商品金额" prop="total" />
                    </el-table>
                </template>
                </el-table-column>
                <el-table-column label="订单编号" prop="orderID" />
                <el-table-column label="订单日期" prop="time" />
                <el-table-column label="订单数量" prop="num" />
                <el-table-column label="订单总金额" prop="sum" />

                <el-table-column align="right">
                    <template #header>
                        <el-input v-model="search" size="small" placeholder="Type to search" />
                    </template>
                    <template #default="scope">
                        <el-button
                        size="small"
                        type="success"
                        @click="Pay(scope.$index)"
                        v-if="!scope.row.isOrdered"
                        >
                        支付
                        </el-button>
                        <el-button
                        size="small"
                        type="success"
                        v-else disabled
                        >
                        已支付
                        </el-button>
                        <el-button
                        size="small"
                        type="danger"
                        @click="handleDelete(scope.$index)"
                        >
                        删除
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>
    </div>
</template>

<script>
import NavTop from '@/components/NavTop.vue';
import { useGoodsStore } from '@/store/goods';
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
    components:{
        NavTop
    },
    data() {
        return {
            tableData:JSON.parse(sessionStorage.getItem('order')),
            store:useGoodsStore(),
            
        }
    },
    methods:{
        handleDelete(index){
            ElMessageBox.confirm(
                '确定要删除这个物美价廉的商品吗?',
                '警告',
                {
                confirmButtonText: '当然了',
                cancelButtonText: '手滑了',
                type: 'warning',
                }
            )
            .then(() => {
                    this.tableData.splice(index,1)
                    sessionStorage.setItem('order',JSON.stringify(this.tableData))
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '删除取消',
                })
            }) 
        },
        Pay(val){
            //此处自行添加交互代码
            ElMessageBox.confirm(
                '确定要支付吗?',
                '亲亲',
                {
                confirmButtonText: '当然了',
                cancelButtonText: '手滑了',
                type: 'warning',
                }
            )
            .then(() => {
                this.tableData[val].isOrdered = true
                //重新修改session数据
                sessionStorage.setItem('order',JSON.stringify(this.tableData))
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '支付取消',
                })
            }) 
            //this.tableData[val].isOrdered = true
        }
    }
}
</script>